<template>
  <div style="display: inline-block; padding: 0.5rem;text-align: left">
    <Select placeholder="过滤条件名称" style="width: 150px;margin-right: 0.5rem;margin-top: 0.3rem;" v-model="value.field" @on-change="changeFilter">
      <OptionGroup v-for="(group, indexGroup) in filterList" :key="indexGroup" :label="group.group">
        <Option v-for="(item, indexItem) in group.options" :key="indexItem" :value="item.value">{{item.label}}</Option>
      </OptionGroup>
    </Select>
    <Select v-if="hasOptions" style="width: 240px;margin-top: 0.3rem" v-model="value.value" :placeholder="getPlaceholder">
      <Option v-for="(item, index) in getOptionByValue(value.field).options" :key="index" :value="item.value">{{item.label}}</Option>
    </Select>
    <template v-else-if="isPriceFilter" >
      <Input type="number" prefix="logo-usd" v-model="value.startValue" style="width: 112px;margin-top: 0.3rem" placeholder="最低价格"></Input>
      ~
      <Input type="number" prefix="logo-usd" v-model="value.endValue" style="width: 112px;margin-top: 0.3rem" placeholder="最高价格"></Input>
    </template>
    <template v-else-if="isDateFilter">
      <DatePicker type="date" placement="bottom-end" :editable="false" placeholder="起始日期"
                  v-model="value.startDate" style="width: 112px; vertical-align: bottom;"></DatePicker>
      ~
      <DatePicker type="date" placement="bottom-end" :editable="false" placeholder="截止日期"
                  v-model="value.endDate" style="width: 112px; vertical-align: bottom;"></DatePicker>
    </template>
    <Input v-else-if="isNormal" :placeholder="getPlaceholder" style="width: 240px;margin-top: 0.3rem" v-model.trim="value.value" @input.native="formatValue"></Input>
  </div>
</template>

<script>
import productData from "../productSelect/js/productData";

export default {
  name: "ProductFilter",
  props: {
    value: {type: Object, required: true}
  },
  data() {
    return {
      filterList: [
        {
          group: "过滤条件",
          options: [
            {
              value: "Gender",
              label: "性别",
              options: [
                {value: "women", label:"women"},
                {value: "men", label:"men"},
                {value: "unisex", label:"unisex"},
                {value: "other", label:"other"},
              ]
            },
            {value: "Material", label: "材质", },
            {
              value: "Size",
              label: "尺码",
              /*options: [
                {value: "ONE SIZE", label:"ONE SIZE"},
                {value: "S", label:"S"},
                {value: "M", label:"M"},
                {value: "L", label:"L"},
                {value: "XL", label:"XL"},
                {value: "2XL", label:"2XL"},
                {value: "3XL", label:"3XL"},
                {value: "4XL", label:"4XL"},
                {value: "5XL", label:"5XL"},
                {value: "6XL", label:"6XL"},
              ]*/
            },
            {value: "Price", label: "价格"},
          ]
        },
        {
          group: "排序",
          options: [
            {
              value: "sortBy",
              label: "排序条件",
              options: [
                {value: 1, label:"Order By Newest"},
                {value: 3, label:"Order By Highest Price"},
                {value: 2, label:"Order By Lowest Price"},
              ]
            },
          ]
        },
        /*{
          group: "日期",
          options: [
            {value: "date", label: "上架日期"},
          ]
        },*/
      ],
      datePickerOptions: productData.tStatus.datePickerOptions,
    };
  },
  methods: {
    getOptionByValue(value) {
      for(let group of this.filterList) {
        for(let option of group.options) {
          if(option.value == value) {
            return option;
          }
        }
      }
    },
    changeFilter(value) {
      this.value.value = null;
      this.value.startValue = null;
      this.value.endValue = null;
      this.value.startDate = null;
      this.value.endDate = null;
    },
    formatValue() {
      this.value.value = this.value.value.toLowerCase();
    },
  },
  computed: {
    hasOptions() {
      let option = this.getOptionByValue(this.value.field);
      return option && option.options != null;
    },
    isSizeFilter() {
      let option = this.getOptionByValue(this.value.field);
      return option && option.value.toLowerCase() == "size";
    },
    isPriceFilter() {
      let option = this.getOptionByValue(this.value.field);
      return option && option.value.toLowerCase() == "price";
    },
    isDateFilter() {
      let option = this.getOptionByValue(this.value.field);
      return option && option.value.toLowerCase() == "date";
    },
    isNormal() {
      return !(this.hasOptions || this.isPriceFilter || this.isDateFilter);
    },
    getPlaceholder() {
      switch (this.value.field.toLowerCase()) {
        case "gender":
          return "选择产品适用性别";
        case "material":
          return "产品材质";
        case "size":
          return "产品尺码，比如S,M,L,XL";
        case "price":
          return "产品价格";
        case "sortby":
          return "选择产品排序方式";
        case "date":
          return "选择上架日期"
        default: {
          return "";
        }
      }
    },
  }
}
</script>

<style lang="less" scoped>
@import  (once,optional)  "../css/base.less";


</style>
